<template>
  <div class="box">
    <el-icon class="copy" color="#59636e" size="16" @click="copy(code)"><CopyDocument /></el-icon>
    <div v-html="html"></div>
  </div>
</template>

<script setup lang="ts">
import highlighter from '@/components/Shiki/shiki';
import { CopyDocument } from '@element-plus/icons-vue'
import { copy } from '@/utils/index'

const props = defineProps({
  lang: {
    type: String,
    required: true
  },
  code: {
    type: String,
    required: true
  },
  theme: {
    type: String,
    default: 'github-light'
  },
})

const html = highlighter.codeToHtml(props.code, {
  lang: props.lang,
  theme: props.theme
})

</script>
<style scoped>
.box {
  position: relative;
}
.copy {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
}
.copy:hover {
  background-color: #eff2f5;
}
</style>
